<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <title>支付</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
  <style>
    * {
      margin: 0;
      border: 0;
      box-sizing: border-box;
    }
    .flex{
      display: flex;
    }
    html,body{
      height: 100%;
    }
    #mainBody {
      flex-direction: column;
      height: 100%;
    }
    .header{
      height: 60px;

      /*border: 1px solid #ccc;*/
      background-color: #571b3b;
    }
    .solid{
      width: 2px;
      height: 50px;
      background-color: #555;
      margin: 0 20px;
    }
    .qu1{
      width: 50%;
      color: #fff;
      text-align: center;
      align-self:center;
    }
    .logo{
      /*height: 120px;*/
      /*border: 1px solid #ccc;*/
    }
    .logo_item{
      width: 50%;
      align-items: center;
      justify-content: center;
    }
    .logo_item img{
      height: 60px;
      width: 120px;
      margin: 10px 0;
    }
    .left{
      flex: 1;
      /*border: 1px solid #ccc;*/
      background-color: #f7f1e9;
    }
    #code{
      margin: auto;
      width: 200px;
      height: 200px;
    }
    @media screen and (max-width: 750px) {
         .xiaoqu{
           width: 0!important;
         }
      .logo{
        flex-wrap: wrap;
      }
      .logo_item{
        width: 100%;
      }
    }

  </style>
</head>
<body>
<div id="mainBody" class="flex">
  <div class="header flex">
    <div class="qu1">

      聚宝通支付
    </div>
    <div class="qu1">
      欢迎您
    </div>
  </div>
  <div class="logo flex">
    <div class="logo_item flex">
      <img src="img/logo2.jpg" alt="">
      <span class="solid" style="background-color: #959296;width: 3px"></span>
      <div style="font-size: 22px;font-weight: bold;color: #959296">收银台</div>
    </div>
    <div class="logo_item " style="font-size: 40px;text-align: center;align-self: center">
      倒计时：<span class="set_time"></span>
    </div>
  </div>
  <div class="left">
    <div class="flex">

      <!--<div class="xiaoqu" style="width: 40%"></div>-->
      <div style="flex: 1;text-align: center;padding: 20px">
        <div>订单已提交，请在30分钟内完成付款，否则订单将被取消</div>
        <div>付款金额：<span>10000</span></div>
      </div>
    </div>


   <div id="code">

   </div>

  </div>
</div>
</body>
<script>
  /**
   * 生产二维码
   * @param text 参数
   */
  function getQrcode(text) {
    $("#code").html('')
    $("#code").qrcode({
      render: "canvas", //table方式
      width: 200, //宽度
      height:200, //高度
      text: text //任意内容
    });
  }

  /**
   * jquery 的ajax请求
   * @param url
   * @param params
   * @param success
   */
  function getJqueryAjax(url, params, success) {

    $.ajax({
      type: "post",
      url: url,
      data: params,
      dataType: "json",
      beforeSend: function (xhr) {
        console.log("start")
      },
      success: function (data) {
        success(data)
      },
      error: function (err) {
        console.log(err)
      },
      async: true

    });

  }

  /**
   * 判断打开方式是手机或电脑
   * @param success
   */
  function browserRedirect(success) {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
      success("手机")
    } else {
      success("电脑")
    }
  }
  // 倒计时
  function leftTimer(num) {

    time_id = setInterval(function () {
      $('.set_time').html(num)
      if (num == 0) {
        clearInterval(time_id)
      }
      num--
    }, 1000)
  }
</script>
<script>
  var text = 'hello world!' + Date.now()
  getQrcode(text)
  leftTimer(240)
</script>

</html>
